<template>
<div class="shoppingList">
  <el-container>
    <el-aside width="150px">
      <el-menu class="vegetable-sort">

        <el-menu-item :index=ind v-for="(item,ind) in vegetableSort" @click="clickSort(ind)">{{item.name}}</el-menu-item>

      </el-menu>
    </el-aside>
    <el-main>
      <el-table :data="productArr">
        <el-table-column type="index" label="编号"
                         width="50"></el-table-column>
        <el-table-column label="商品名" prop="vegetableName" width="150"></el-table-column>
        <el-table-column label="价格" prop="vegetablePrice" width="100"></el-table-column>
        <el-table-column label="最大购买量" prop="vegetableMax" width="100"></el-table-column>
        <el-table-column label="库存" prop="vegetableStock" width="100"></el-table-column>
        <el-table-column label="商品图片" width="200">
          <template slot-scope="scope">
            <!--scope.row代表当前遍历的数组中的对象-->
            <img :src="scope.row.vegetableImage" width="150" height="100" alt="">
          </template>
        </el-table-column>
        <!--*******************************-->
        <el-table-column label="操作">
          <!--scope代表每行对应的数据里面的index属性代表下标,
          里面的row代表每行对应的数组中的对象-->
          <template slot-scope="scope">
            <!--confirm确认事件-->
            <el-popconfirm @confirm="productDelete(scope.$index, scope.row)"
                           title="确定下架该商品吗吗？">
              <el-button size="mini"
                         type="danger" slot="reference">下架</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
        <!--*******************************-->
      </el-table>
    </el-main>
  </el-container>
</div>
</template>

<script>
import {vegetableList} from "@/api/admin_api";
import {setToken} from "@/utils/Token";

export default {
  name: "admin-shopping",
  data(){
    return{
      productArr:[],
      vegetableSort:[
        {name: '蔬菜'},{name: '肉类'},{name: '其它'},{name: '水果'}
      ],
    }
  },

  created() {
    // setToken('token','eyJjdHkiOiJIUzI1NiIsInR5cCI6IkpXVCIsImFsZyI6IkhTMjU2In0.eyJuZXRJZCI6MSwiaWRlbnRpdHkiOjIsIm5ldFBhc3N3b3JkIjoiJDJhJDEwJHpvaW9Sc085WjBDL1g0b1JHSmxRSC5weTlQeGdXUDF1SEtrWEQ2OTF2UHJaQVM4LnBDb0NtIiwiY29tbXVuaXR5SWQiOjEsImV4cCI6MTY2MzQwMTYwMiwiYWNjb3VudCI6IjExMTFAcXEuY29tIn0.Crxmwvxkg5c67VhUPK-Qgnt0_oZJmrg6D5mf3P2tpXM')
    vegetableList(this.vegetableSort[0].name).then((res)=>{
      this.productArr = res.data.data;
    })

  },
  methods: {
    productDelete(index){
      this.productArr.splice(index,1);
    },

    clickSort(ind){

      vegetableList(this.vegetableSort[ind].name).then((res)=>{
        this.productArr = res.data.data;
      })
    }

  }
}
</script>

<style >

.shoppingList .el-table .cell{
  text-align: center;
}

.shoppingList .vegetable-sort .el-menu-item{
  text-align: center;
}
</style>